<template>
  <div class="safeDistance">
    <u-navbar bgColor="transparent">
      <template #left></template>
      <template #center>我的</template>
    </u-navbar>
    <div style="width: 100%; height: 160rpx"></div>
    <div v-if="!showModal" class="" style="padding: 0 30rpx">
      <div
        class="bgf mt80r rel"
        style="
          height: 220rpx;
          padding: 10rpx 25rpx;
          background-color: #eff5fe;
          border-radius: 30rpx;
        "
      >
        <div class="abs" style="top: -50rpx; left: 40rpx">
          <u-avatar :src="userInfo.imgUrl" size="60"></u-avatar>
        </div>
        <!-- <div class="f ac xb" style="margin-left: 150rpx">
          <div class="f cn">
            <div class="b fs38r">{{ userInfo.userName || "花开四季" }}</div>
            <div class="g9 fs26r mt10r fw500">
              {{ userInfo.phoneNumber || "17316667876" }}
            </div>
          </div>
     
        </div> -->
        <div @click="goPersonalInfo" style="position: absolute;right: 10%;top: 20%;">
          <u-icon bold name="setting" size="100"></u-icon>
        </div>
        <div class="ml20r mt80r">
          <div class="f ac b">
            <div class="fs30r mr20r" style="color: #a2a2a2">姓名：</div>
            <div class="fs32r">{{ userInfo.userName }}</div>
          </div>

          <div class="f ac b mt20r mb30r">
            <div class="fs30r mr20r" style="color: #a2a2a2">手机号：</div>
            <div class="fs32r">{{ userInfo.phone }}</div>
          </div>
        </div>
      </div>
      <div class="mt40r task" style="padding: 0 30rpx; height: 800rpx">
        <div class="f ac xb">
          <div class="b f fs32r mt20r">
            <div>个人信息</div>
          </div>
          <!--          <div class="">-->
          <!--            <image-->
          <!--                src="@/static/mine/yyf_icon.png"-->
          <!--                style="width: 74rpx; height: 92rpx"-->
          <!--            />-->
          <!--          </div>-->
        </div>
        <div
          class="mt20r mb20r"
          style="background: #f6f6f6; height: 1px; width: 100%"
        ></div>
        <div class="f xb ac">
          <div class="f ac">
            <div class="b fs34r">学校</div>
          </div>
          <div class="f ac" @click="share">
            <u-button
              hoverStartTime="999999"
              customStyle="background-color: unset;border-color: transparent;color: #a2a2a2;padding: 0;"
              open-type="share"
              class="mr10r fs34r"
              style="color: #a2a2a2"
            >
              {{ userInfo.school }}
            </u-button>
          </div>
        </div>
        <div
          class="mt20r mb20r"
          style="background: #f6f6f6; height: 1px; width: 100%"
        ></div>
        <div class="f xb ac">
          <div class="f ac">
            <div class="b fs34r">学号</div>
          </div>
          <div class="f ac" @click="share">
            <u-button
              hoverStartTime="999999"
              customStyle="background-color: unset;border-color: transparent;color: #a2a2a2;padding: 0;"
              open-type="share"
              class="mr10r fs34r"
              style="color: #a2a2a2"
            >
              {{ userInfo.studentNumber }}
            </u-button>
          </div>
        </div>
        <div
          class="mt20r mb20r"
          style="background: #f6f6f6; height: 1px; width: 100%"
        ></div>
        <div class="f xb ac">
          <div class="f ac">
            <div class="b fs34r">年级</div>
          </div>
          <div class="f ac" @click="share">
            <u-button
              hoverStartTime="999999"
              customStyle="background-color: unset;border-color: transparent;color: #a2a2a2;padding: 0;"
              open-type="share"
              class="mr10r fs34r"
              style="color: #a2a2a2"
            >
              {{ userInfo.grade }}
            </u-button>
          </div>
        </div>

        <div
          class="mt20r mb20r"
          style="background: #f6f6f6; height: 1px; width: 100%"
        ></div>

        <div class="f xb ac">
          <div class="f ac">
            <div class="b fs34r">专业</div>
          </div>
          <div class="f ac" @click="share">
            <u-button
              hoverStartTime="999999"
              customStyle="background-color: unset;border-color: transparent;color: #a2a2a2;padding: 0;"
              open-type="share"
              class="mr10r fs34r"
              style="color: #a2a2a2"
            >
              {{ userInfo.major }}
            </u-button>
          </div>
        </div>

        <div
          class="mt20r mb20r"
          style="background: #f6f6f6; height: 1px; width: 100%"
        ></div>
      </div>
    </div>
    <div
      class="bgf fixed l0 r0 b1 btn"
      style="padding: 20rpx 40rpx; box-shadow: 0px -5px 10px 0px #d6d7d9"
    >
      <button type="primary" @click="loginOut">退出登录</button>
    </div>
    <!--    <u-tabbar :value="value1" fixed :placeholder="false" safeAreaInsetBottom>-->
    <!--      <u-tabbar-item-->
    <!--          @click="goHome"-->
    <!--          text="首页"-->
    <!--          icon="home"-->
    <!--          name="home"-->
    <!--      ></u-tabbar-item>-->
    <!--      <u-tabbar-item text="我的" icon="account" name="account"></u-tabbar-item>-->
    <!--    </u-tabbar>-->
    <u-modal
      :show="showModal"
      title="提示"
      :content="content"
      @confirm="confirm"
    ></u-modal>
  </div>
</template>

<script>
import { getMineInfo, infoEdit } from "@/api/index";
import { login } from "../../api/login";
// import {
//   dailyTaskShare,
//   getCredit,
//   getMyDailyTask,
//   getMyInfo,
// } from "@/api/business";

// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
export default {
  name: "",
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      dailyTaskList: {},
      src: "https://img1.baidu.com/it/u=3200425930,2413475553&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
      value1: "account",
      userInfo: {
        phoneNumber: "",
        name: "",
        nickName: "",
      },
      taskTotal: 0,
      showModal: false,
      content: "当前分享页面需要登录后查看！",
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onShareAppMessage(res) {
    if (res.from === "button") {
      // 来自页面内分享按钮
      console.log(res.target);
    }
    // return {
    //   path: "/pages/login/indxe",
    // };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async onLoad() {
    wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
    // if (!this.$store.state.user.token||!this.$store.state.user.userId)  return  this.showModal=true
  },
  onShow() {
    // if (!this.$store.state.user.token||!this.$store.state.user.userId) return
    this.getuserInfo();
    // this.getDailyTask();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - 创建之前
  beforeCreate() {},
  // 生命周期 - 挂载之前
  beforeMount() {},
  // 生命周期 - 更新之前
  beforeUpdate() {},
  // 生命周期 - 更新之后
  updated() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 方法集合
  methods: {
    confirm() {
      uni.redirectTo({
        url: "/pages/login/index",
      });
    },
    loginOut() {
      uni.showModal({
        title: "退出登录",
        content: "是否确认退出登录？",
        success: (res) => {
          if (res.confirm) {
            uni.clearStorageSync();
            uni.reLaunch({
              url: "/pages/login/index",
            });
          }
        },
      });
    },
    async getDailyTask() {
      let { code, msg, data } = await getMyDailyTask();
      if (code === 200) {
        this.handleDailyTaskData(data);
      } else {
        uni.showToast({
          title: msg,
        });
      }
      let res = await getTaskTotal();
      this.taskTotal = res.data;
    },
    handleDailyTaskData(data) {
      if (data.length) {
        console.log(JSON.stringify(data));
        this.dailyTaskList = data.reduce((acc, cur) => {
          acc[cur.taskCode] = cur.isFinish;
          return acc;
        }, {});
      } else {
        this.dailyTaskList = {};
      }
      console.log(this.dailyTaskList);
    },

    async getuserInfo() {
      const res = await getMineInfo();

      this.userInfo = res.data;
    },
    goPersonalInfo() {
      uni.navigateTo({
        url: "/pages/personalInfo/index",
      });
    },
    goCreditScoreRecord() {
      uni.navigateTo({
        url:
          "/pages/creditScoreRecord/index?item=" +
          encodeURIComponent(JSON.stringify(this.userInfo)),
      });
    },
    goHome() {
      // uni.redirectTo({
      //   url: "/pages/personal/index",
      // });
    },
    share() {
      shareApp();
    },
  },
};
</script>
<style scoped>
.task {
  background: linear-gradient(
    180deg,
    #dbe8fd,
    #ffffff,
    #ffffff,
    #ffffff,
    #ffffff
  );
}
button {
  font-size: 28rpx;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}
/* button:active {
  font-size: 28rpx;
  background: red;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
} */
::v-deep .u-icon__icon {
  font-size: 40rpx !important;
  line-height: 40rpx !important;
}
</style>

<style>
page {
  background: linear-gradient(135deg, #b7c6eb, #f6f9ff);
}
</style>
/* background: url(../../static/mine/my_bg.png); */
